<template>
	<div class="home">
		<Header></Header>
		<div class="container">
			<div>
				<Swiper :swiperList="swiperList"></Swiper>
				<Icons  :iconsList="iconsList"></Icons>
				<Localtion></Localtion>
				<Hot :hotList="hotList"></Hot>
				<Like :likeList="likeList"></Like>
				<Where :whereList="whereList"></Where>
				<Footer></Footer>
			</div>
		</div>

		<!-- <Bodyer></Bodyer> -->
		<img src="/api/data/img/time.gif" alt="" class="time">
	</div>
</template>
<script>
	import Header from './pages/header.vue'
	import Swiper from './pages/swiper'
	import Icons from './pages/icons'
	import Localtion from './pages/localtion'
	import Hot from './pages/hot'
	import Like from './pages/like'
	import Where from './pages/where'

	import Footer from './pages/footer'
	// import Bodyer from './pages/bodyer'
	 import { mapState } from 'vuex'

	export default{
		components:{
			Header,
			Footer,
			// Bodyer,
			Swiper,
			Icons,
			Localtion,
			Hot,
			Like,
			Where
		},
		data(){
			return{
				swiperList:[],
				iconsList:[],
				hotList:[],
				likeList:[],
				whereList:[],
				changeCity:""
			}
		},
		computed:{
              ...mapState(['city'])
        },
		methods:{
			GetHttp(){
				// this.$http.get("/api/data/data.json").then((response)=>{
				this.$http.get("./../../../static/mock/data/data.json").then((response)=>{
					let data = response.data.data
			        data.forEach((item,index)=>{
			        	if(item.city ==this.city){
					        this.swiperList =item.swiperList
					        this.iconsList =item.iconsList
					        this.hotList =item.hotList
					        this.likeList =item.likeList
					        this.whereList =item.whereList
			        	}
			        	// if(!item.city){
			        	// 	 localtion.href('home.vue')
			        	// }
			        })
		        })
			}
		},
	    mounted(){
	    	this.GetHttp()
	    	this.changeCity =this.city;
	    },
	    activated(){
	    	if(this.changeCity !=this.city){
	    		this.GetHttp()
	    		this.changeCity =this.city;

	    		// this.swiperList =""
		     //    this.iconsList =""
		     //    this.hotList =""
		     //    this.likeList =""
		     //    this.whereList =""
	    	}
	    }
	}
</script>
<style>
      .time{
      	display: block;
      	width: 100%;
      	height: 2.4rem;
      }
</style>